<template>
  <div>
    <div class="container">
      <el-row>
        <div class="flights-content">
          <div class="right">
                <!-- 过滤条件 -->
                <FlightsFilter :flightFilterData="cacheflightInfo" v-if="flightInfo" @setData="setData"/>
                <!-- 航班飞机头 -->
                <FlightHeader />
                <!-- ✈身信息 -->
                <div v-if="flightList.length">
                  <FlightItem v-for="(item ,index) in flightList" :key="index" :flight="item" />
                </div>
                <div v-else>没有该行程的航班信息</div>
          </div>
          <!-- 侧边栏 -->
          <div class="left">
                <FlightsAside />
          </div>
        </div>
                <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="curPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
import FlightHeader from '../../components/plane/flightsHeader'
import FlightItem from '../../components/plane/flightsItems'
import FlightsFilter from '../../components/plane/flightsFilter'
import FlightsAside from '../../components/plane/flightsAside'
export default {
  name: '',
  components: {
    FlightHeader,
    FlightItem,
    FlightsFilter,
    FlightsAside
  },
  data () {
    return {
      flightInfo: {
        info: {},
        options: {}
      },
      cacheflightInfo:
      {
        info: {},
        options: {}
      },
      total: 0,
      curPage: 1,
      pageSize: 5,
      flightList: {}
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.$http.get('/airs', { params: this.$route.query }).then(res => {
        // 总数据，可更改
        this.flightInfo = res.data
        // 缓存数据，作用不可更改
        this.cacheflightInfo = { ...res.data }
        this.total = res.data.total
        this.curPage = 1
        this.setData()
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.setData()
    },
    handleCurrentChange (val) {
      this.curPage = val
      this.setData()
    },
    setData (arr) {
      if (arr) {
        this.flightInfo.flights = arr
        this.total = arr.length
      }
      this.flightList = this.flightInfo.flights.slice(
        (this.curPage - 1) * this.pageSize,
        this.curPage * this.pageSize
      )
    }
  },
  mounted () {
    this.getData()
  },
  watch: {
    $route () {
      this.getData()
    }
  }
}
</script>

<style scoped lang="less">
.container {
  width: 1000px;
  margin: 0 auto;
  margin-top: 20px;
  .el-pagination{
    margin: 30px 0;
  }
  .flights-content{
    display: flex;
    .left{
      margin-left: 20px;
      margin-top: 20px;
    }
  }
}
</style>
